<template>
    <div class="scorllBox">
        <div class="scrollnameList">
            <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p>
        </div>
        <div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
            <swiper class="sm-content seamless-warp" :options="swiperOption()" :style="{ height: scorllHeight + 'px' }"
                v-if="scorllBoxList.length > 0" ref="mySwiper">
                <swiper-slide class="sm-li scroll_item" v-for="(item, idx) in scorllBoxList" :key="idx">
                    <span>{{ item.name }}</span>
                    <span>{{ item.time }}</span>
                    <span>{{ item.area }}</span>
                    <span v-if="item.state === '已处理' || item.state === '进入小区'" style="color:#33a091">{{ item.state }}</span>
                    <span v-else style="color:#a27741">{{ item.state }}</span>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
  
<script>
//循环滚动
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");

export default {
    components: {
        swiper,
        swiperSlide
    },
    props: {
        scorllBoxListName: {
            default: () => {
                return ["类别", "时间", "区域", "状态"];
            }
        },
        scorllHeight: {
            default: 180
        },
        scorllBoxList: {
            default: () => {
                return [
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                    {
                        name: "名字",
                        time: "时间",
                        area: "区域",
                        state: "已处理"
                    },
                ];
            }
        }
    },
    //计算属性，获得可以操作的swiper对象
    computed: {
        mySwiper() {
            // mySwiper 是要绑定到标签中的ref属性
            return this.$refs.mySwiper.swiper
        }
    },
    data() {
        return {
        };
    },
    methods: {
        on_top_enter() {
            this.mySwiper.autoplay.stop()
            this.mySwiper.setTranslate(this.mySwiper.getTranslate());//鼠标移入立刻停止滚动
        },
        on_top_leave() {
            this.mySwiper.autoplay.start()
        },
        swiperOption() {
            return {
                notNextTick: true,
                direction: 'vertical',
                speed: 1500,//滚动速度
                autoplay: {
                    delay: 1,
                    disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
                    waitForTransition: true,//等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
                },
                simulateTouch: false,//设置鼠标拖动无效
                freeMode: true,//free模式，slide会根据惯性滑动且不会贴合
                mousewheel: {
                    sensitivity: 2,//滚动一次切换几个slide
                },
                loop: true,//循环
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                spaceBetween: 0,//slide之间的距离（单位px）
                slidesPerView: Number(this.scorllHeight) / 30, //slide可见数量，30: 行高
            }
        },
    }
};
</script>
  
<style lang="less" scoped>
.scorllBox {
    border: 1px solid #153f55;
    overflow: hidden;
}

.seamless-warp {
    width: 100%;
    color: #fff;
    overflow: hidden;

    .scroll_item {
        border-bottom: 1px solid #184f70;
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        box-sizing: border-box;

        span {
            flex: 1;
        }
    }
}

.scrollnameList {
    color: #fff;
    background-color: #042735cc;
    height: 30px;
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #184f70;
    align-items: center;
    text-align: center;

    p {
        flex: 1;
        color: #c3cbd1;
    }
}
</style>
  